<template>
  <base-modal :show.sync="serviceDialog" :title="$t('projectManage.taskManageView.updateProgressDialog.text2')" width="520px" @close="handleClose" class="progress-dialog">
    <div class="progress-content">
      <div class="progress-content-top">
        <el-slider v-model="form.progress" :show-tooltip="false"></el-slider>
        <el-input type="number" v-model.number="form.progress" @input="handelInput" :min="0" :max="100"></el-input>
        <span>%</span>
      </div>
      <div class="progress-content-bottom">
        <label>{{$t('projectManage.taskManageView.updateProgressDialog.text1')}}</label>
        <el-input type="textarea" v-model="form.desc" :placeholder="$t('projectManage.taskManageView.updateProgressDialog.text3')" maxlength="500" show-word-limit></el-input>
      </div>
    </div>

    <div slot="footer">
      <el-button @click="handleClose">{{ $t('common.base.close') }}</el-button>
      <el-button type="primary" @click="handleSubmit">{{ $t('common.base.save') }}</el-button>
    </div>
  </base-modal>
</template>
<script>
import { defineComponent, ref, computed, reactive, toRefs } from 'vue';
/* components */
import { MessageBox } from 'element-ui';
import Platform from '@src/util/platform';

export default defineComponent({
  name: 'update-progress-dialog',
  props: {
    taskProgress: {
      type: Number,
      default: 0,
    },
    // 是否可以更新到100% 默认是可以的，只有工单特殊处理
    canFinish: {
      type: Boolean,
      default: true,
    }
  },
  emits: ['submit'],
  setup(props, { emit }) {
    const state = reactive({
      serviceDialog: false,
      form: {
        progress: 0,
        desc: '',
      },
    });

    // 打开弹框
    const openDialog = () => {
      state.form.progress = props.taskProgress || 0;
      state.form.desc = ''; // 默认清空
      state.serviceDialog = true;
    };

    // 关闭
    const handleClose = () => {
      state.serviceDialog = false;
    };

    // 保存
    const handleSubmit = async () => {
      if (state.form.progress === 100) {
        if (!props.canFinish) return Platform.toast(i18n.t('common.projectManage.editTip3'), 'error');
        MessageBox.confirm(i18n.t('projectManage.taskManageView.updateProgressDialog.text4'), i18n.t('contract.delContract.confirm.title'), {
          type: 'warning',
        })
          .then(() => {
            emit('submit', state.form);
          })
          .catch(err => {});

        return;
       
      }
      emit('submit', state.form);
    };

    // 进度变化
    const handelInput = e => {
      state.form.progress = Math.floor(e);
    };

    return {
      ...toRefs(state),
      openDialog,
      handleSubmit,
      handleClose,
      handelInput,
    };
  },
});
</script>
<style lang="scss" scoped>

.progress-dialog {
    // ::v-deep .base-modal {
    //     top: 10%;
    // }
}
.progress-content {
  padding: 30px 24px 0;

  &-top {
    display: flex;
    align-items: center;
    margin-bottom: 24px;

    .el-slider {
      width: 60%;
    }
    .el-input {
      width: 50px;
      height: 32px;
      border-radius: 4px;
      margin: 0 8px 0 12px;

      ::v-deep .el-input__inner {
        padding-right: 0;
      }
    }
    > span {
      color: $text-color-secondary;
    }
  }

  &-bottom {
    margin-bottom: 70px;

    label {
      margin-bottom: 8px;
    }
    ::v-deep .el-textarea__inner {
      height: 80px;
    }
  }
}
</style>
